import React, { useState, useEffect } from 'react'
import { Cascader, Button } from "antd"
import { getArea } from "../services/location"


function Cascard({ value, onChange }, ref) {
    const [options, setOptions] = useState([])
    const [choose, setChoose] = useState([])
    useEffect(() => {
        getArea().then(res => {
            const provinces = res.map(item => ({
                cid: item.id,
                value: item.simpleName,
                label: item.simpleName,
                isLeaf: false
            }))
            setOptions(provinces);
        })
    }, [])
    return (
        <div>
            <Cascader
                ref={ref}
                onChange={newValue => {
                    onChange && onChange(newValue)
                    setChoose(newValue)
                }}
                options={options}
                loadData={selectOptions => {
                    const opt = selectOptions[selectOptions.length - 1]
                    const parentId = opt.cid
                    opt.loading = true
                    getArea(parentId).then(resp => {
                        opt.loading = false
                        opt.children = resp.map(it=>({
                            cid: it.id,
                            value: it.simpleName,
                            label: it.simpleName,
                            isLeaf: selectOptions.length === 2
                        }))
                        setOptions([...options]);
                     })
                }}
            />
            {/* <Button typ="primary" onClick={() => {
                console.log(choose);
            }}>获取</Button> */}
        </div>
    )
}


export default React.forwardRef(Cascard)